<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本信息</title>
    <!--bootstrap-->
    <link href="/shop-app/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/shop-app/js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/shop-app/bootstrap/js/bootstrap.min.js"></script>
    <!-- 引入HttpUtil.js -->
    <script src="/shop-app/js/HttpUtil.js"></script>
    <!--引入存到浏览器的js文件-->
    <script src="/shop-app/js/UserCacheUtil.js"></script>
    <!-- 界面报icon找不到问题 -->
    <link rel="shortcut icon" href="#"/>
</head>
<body>

<blockquote class="text-primary">
    <p>基本信息 </p>
</blockquote>
<hr>

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">头像：</label>
        <div class="col-sm-10">
            <img src="/shop-app/user/img/default.jpg" alt="图片找不到啦！" onclick="changeImg()" width="120px" height="120px" class="img-circle">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">等级：</label>
        <div class="col-sm-10">
            <label class="control-label uLevel">1</label>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">余额：</label>
        <div class="col-sm-10">
            <label class="control-label uBalance">1</label>
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">昵称：</label>
        <div class="col-sm-10">
            <input type="text" class="form-control uName" id="inputEmail3" placeholder="name">
        </div>
        <label class="control-label"></label>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">手机号：</label>
        <div class="col-sm-10">
            <input type="text" class="form-control uPhone" placeholder="phone">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">邮箱：</label>
        <div class="col-sm-10">
            <input type="email" class="form-control uEmail" placeholder="email">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2  control-label">性别：</label>
        <div class="col-sm-7" style="width: 40%">
            <label class="radio-inline">
                <input type="radio" name="uSex" value="男"> 男
            </label>
            <label class="radio-inline">
                <input type="radio" name="uSex" value="女"> 女
            </label>
        </div>
    </div>

    <hr>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" onclick="saveBtn()" class="btn btn-default">保存</button>
        </div>
    </div>
</form>

<script>
    let loginUser = getLocalStorage("loginUser");
    console.log(loginUser);
    $(function () {
        //渲染基础数据
        $('.uLevel').html(loginUser.uLevel);
        $('.uBalance').html(loginUser.uBalance);
        $('.uName').val(loginUser.uName);
        $('.uPhone').val(loginUser.uPhone);
        $('.uEmail').val(loginUser.uEmail);
        $(":radio[name='uSex'][value='" + loginUser.uSex + "']").prop("checked", "checked");
    })

    //  点击图片
    function changeImg() {
        console.log("111");
    }

    function saveBtn() {

        if (confirm("确认保存信息") == true) {
            //保存数据到数据库  ajax
            let url = "/user/userInfoUpData";
            let params = {
                uId: loginUser.uId,
                uName: $(".uName").val(),
                uPhone: $(".uPhone").val(),
                uEmail: $(".uEmail").val(),
                uSex: $('input:radio:checked').val()
            };
            console.log(params);
            httpPostApi(url, params, function (data) {
                //请求成功
                // 将数据存到作用域中
                updataLocalStorage("loginUser",data)
                // 刷新页面 重新渲染数据
                location.reload();
            });
        }
        //请求成功刷新页面
    }


</script>

</body>
</html>